<script setup lang="ts">
import { computed, watch } from 'vue'

defineOptions({
  name: 'Drawer'
})

// 定义 props
const props = withDefaults(
  defineProps<{
    modelValue: boolean // 控制抽屉显示/隐藏 (v-model)
    position?: 'left' | 'right'
    width?: string // Tailwind/UnoCSS width class, e.g., 'w-72', 'w-96'
    title?: string
  }>(),
  {
    position: 'left',
    width: 'w-72' // Default width
  }
)

// 定义 emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
}>()

// 关闭抽屉
const closeDrawer = () => {
  emit('update:modelValue', false)
  emit('close')
}

// --- Dynamic Classes for Positioning and Transitions ---

// 位置相关类
const positionClasses = computed(() => {
  return props.position === 'left' ? 'left-0 rounded-r-lg' : 'right-0 rounded-l-lg'
})

// 背景遮罩过渡
const backdropTransition = {
  enterActiveClass: 'transition-opacity ease-out duration-300',
  enterFromClass: 'opacity-0',
  enterToClass: 'opacity-100',
  leaveActiveClass: 'transition-opacity ease-in duration-200',
  leaveFromClass: 'opacity-100',
  leaveToClass: 'opacity-0'
}

// 抽屉面板过渡
const panelTransition = computed(() => {
  const baseTransition = 'transition ease-in-out duration-300 transform'
  if (props.position === 'left') {
    return {
      enterActiveClass: baseTransition,
      enterFromClass: '-translate-x-full',
      enterToClass: 'translate-x-0',
      leaveActiveClass: baseTransition,
      leaveFromClass: 'translate-x-0',
      leaveToClass: '-translate-x-full'
    }
  } else {
    return {
      enterActiveClass: baseTransition,
      enterFromClass: 'translate-x-full',
      enterToClass: 'translate-x-0',
      leaveActiveClass: baseTransition,
      leaveFromClass: 'translate-x-0',
      leaveToClass: 'translate-x-full'
    }
  }
})

// --- Body Scroll Lock --- Optional but recommended

watch(
  () => props.modelValue,
  newValue => {
    if (typeof document !== 'undefined') {
      if (newValue) {
        document.body.style.overflow = 'hidden'
      } else {
        // Delay removing overflow lock slightly to allow animation to finish
        setTimeout(() => {
          document.body.style.overflow = ''
        }, 300) // Match transition duration
      }
    }
  }
)
</script>

<template>
  <teleport to="body">
    <!-- Background Backdrop -->
    <transition v-bind="backdropTransition">
      <div
        v-if="modelValue"
        class="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm"
        aria-hidden="true"
        @click="closeDrawer"
      ></div>
    </transition>

    <!-- Drawer Panel -->
    <transition v-bind="panelTransition">
      <div
        v-if="modelValue"
        class="fixed top-0 bottom-0 z-50 flex flex-col bg-gray-100/80 dark:bg-neutral-800/80 backdrop-blur-lg shadow-xl border-gray-200/50 dark:border-neutral-700/50"
        :class="[positionClasses, width, props.position === 'left' ? 'border-r' : 'border-l']"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="title ? 'drawer-title' : undefined"
      >
        <!-- Header (Optional Title + Close Button) -->
        <div
          class="flex items-center justify-between p-4 border-b border-gray-200/60 dark:border-neutral-700/60 flex-shrink-0"
        >
          <h2
            v-if="title"
            id="drawer-title"
            class="text-lg font-semibold text-gray-900 dark:text-neutral-100"
          >
            {{ title }}
          </h2>
          <button
            @click="closeDrawer"
            class="p-1 rounded-full text-gray-500 dark:text-neutral-400 hover:bg-gray-200/50 dark:hover:bg-neutral-700/50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 ml-auto"
            aria-label="Close drawer"
          >
            <i class="iconfont icon-ios-close !text-xl"></i>
          </button>
        </div>

        <!-- Content Area -->
        <div class="flex-grow overflow-y-auto p-4">
          <slot>抽屉内容...</slot>
        </div>

        <!-- Footer Slot (Optional) -->
        <div
          v-if="$slots.footer"
          class="p-4 border-t border-gray-200/60 dark:border-neutral-700/60 flex-shrink-0"
        >
          <slot name="footer"></slot>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<style scoped>
/* Scoped styles if needed, but most styling is handled by UnoCSS/Tailwind */
/* Ensure backdrop-blur works if not enabled globally */
.backdrop-blur-lg {
  backdrop-filter: blur(16px);
}
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Ensure smooth scrolling on content */
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
}
</style>
